<template>
  <div class="perfectCarBox">
    <c-title :hide="false" :text="pageTitle"></c-title>
   <div v-if="carData" class="perfectCarCont">
    <div class="title">您添加的爱车</div>
    <div class="carInfoBox">
      <div class="carInfoBoxL">
        <div class="carInfoBoxLtext_1">{{carData.brand}} {{carData.typename}}</div>
        <div class="carInfoBoxLtext_2">{{carData.yeartype}}款-{{carData.displacement}} {{carData.gearbox}} {{carData.version}}</div>
      </div>
      <!-- <div class="carInfoBoxR">
        <img src="../../assets/images/carImg/carImg.png" class="carPict"/>
      </div> -->
    </div>
    <div class="perfectTitle">
      <div class="title_1">继续完善信息</div>
      <div class="title_2">完善车辆信息可为您匹配更精准的服务</div>
    </div>
    <div class="formBox">
      <div class="formLine">
        <div class="formLineL">轮胎尺寸</div>
        <div class="formLineR">
          <van-field v-model="ltcc" placeholder="请输入" class="vininput" />
        </div>
      </div>
      <div class="formLine">
        <div class="formLineL">电瓶型号</div>
        <div class="formLineR">
          <van-field v-model="dpxh" placeholder="请输入" class="vininput" />
        </div>
      </div>
      <div class="formLine">
        <div class="formLineL">车牌号</div>
        <div class="formLineR">
          <van-field v-model="cph" placeholder="请输入" class="vininput" />
        </div>
      </div>
      <div class="formLine" style="margin:0;">
        <div class="formLineL">保险日期</div>
        <div class="formLineR" style="border:0">
          <el-date-picker v-model="insurance_date" size="small"  type="date" style="width:100%"
              placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
            </el-date-picker>
          <!-- <van-field v-model="bxrq" placeholder="请输入" class="vininput" /> -->
        </div>
      </div>
    </div>
    <div class="btn" @click="gomyGarage">
      完成
    </div>
    <!-- <div class="tips">识别有误?删除当前车辆并选择 <span style="color: #FB1622;">其他添加爱车方式</span></div> -->
   </div>
  </div>
</template>

<script>
import {
  Toast
} from 'vant';
import cTitle from "components/title";
export default {
  data() {
    return {
     carData:null,
     ltcc:'',
     dpxh:'',
     cph:'',
     insurance_date:'',
     backnum:null,
     pageTitle:''
    };
  },
  created(){
    
  },
  mounted() {
    
  },
  activated() {
    this.ltcc = '';
    this.dpxh = '';
    this.cph = '';
    if(this.$route.query.back){
      this.backnum = this.$route.query.back
    }
    this.pageTitle = this.$route.query.title || "我的爱车";
    this.fun.setWXTitle(this.pageTitle);
    if(window.sessionStorage.getItem('carData')){
      this.carData = JSON.parse(window.sessionStorage.getItem('carData'))
    }
  },
  deactivated() {
   
  },
  // beforeRouteLeave(to, from, next) {
    
  // },
  methods: {
    gomyGarage(){
      console.log(88888888888)
      let url = "car.personalCarAdd";
      let json = { 
        brand_id:'', 
        brand_name:this.carData.brand,
        series_id:'',
        series_name:this.carData.typename,
        car_model_id:'',
        car_model_name:'',
        vin_code:this.carData.vin,
        pl:this.carData.displacement?this.carData.displacement:'-',
        nf:this.carData.yeartype?this.carData.yeartype:'-',
        dlpz:this.carData.maxhorsepower?this.carData.maxhorsepower:'',
        fdj:this.carData.engine?this.carData.engine:'-',
        dp:this.carData.chassis?this.carData.chassis:'-',
        gearbox:this.carData.gearbox?this.carData.gearbox:'-',
        version:this.carData.version?this.carData.version:'-',
        ltcc:this.ltcc?this.ltcc:'-',
        dpxh:this.dpxh?this.dpxh:'-',
        cph:this.cph?this.cph:'-',
        insurance_date:this.insurance_date,
        is_default:'',
        member_id:window.localStorage.getItem('member_id')
      };
      $http.post(url, json, "loading").then(response => {
        console.log(response)
        if(response.result==1){
          if(this.backnum){
            //this.$router.go(-this.backnum)
            this.backnum = null;
            this.$router.push(this.fun.getUrl('myGarage'))
          }else{
            this.$router.replace(this.fun.getUrl('myloveCar'))
          }
        } else {
          Toast(response.msg);
        }
      })
    }
  },
  components: {
    cTitle
  }
};

</script>

<style lang="scss" rel="stylesheet/scss" scoped>
 
 .perfectCarBox{
  width: 100%;
  height: 100vh;
  background: #F5F5F5;
  .perfectCarCont{
    width: 93.6%;
    height: auto;
    margin:0 auto;
    .title{
      width: 100%;
      height: 2.875rem;
      font-weight: 500;
      font-size: 1rem;
      color: #333333;
      line-height: 2.875rem;
      text-align: left;
    }
    .carInfoBox{
      width: 100%;
      height: 4.25rem;
      background: linear-gradient( 324deg, rgba(255,255,255,0.68) 0%, rgba(255,255,255,0.5) 100%);
      box-shadow: 0px 1px 24px -1px rgba(0,0,0,0.01);
      border-radius: 0.5rem;
      border: 1px solid rgba(255,255,255,0.6);
      .carInfoBoxL{
        width: 67.512%;
        height: 100%;
        padding-left: 0.75rem;
        box-sizing: border-box;
        float: left;
        .carInfoBoxLtext_1{
          font-weight: 500;
          font-size: 1rem;
          color: #333333;
          line-height: 1.375rem;
          text-align: left;
          margin-top:0.675rem;
        }
        .carInfoBoxLtext_2{
          font-weight: 500;
          font-size: 0.75rem;
          color: #666;
          line-height: 1rem;
          text-align: left;
          margin-top:0.25rem;
        }
      }
      .carInfoBoxR{
        width: 32%;
        height: 100%;
        padding: 0.75rem;
        box-sizing: border-box;
        float: right;
        .carPict{
          width: 100%;
          height: 100%;
        }
      }
    }
    .perfectTitle{
      width: 100%;
      height: 1.375rem;
      margin-top:1.5rem;
      .title_1{
        font-weight: 500;
        font-size: 1rem;
        color: #333333;
        line-height: 1.5rem;
        text-align: left;
        float: left;
      }
      .title_2{
        font-weight: 500;
        font-size: 0.75rem;
        color: #999;
        line-height: 1.5rem;
        text-align: left;
        float: left;
        margin-left:0.5rem;
      }
    }
    .formBox{
      width: 100%;
      height: 14rem;
      background: #fff;
      border-radius: 0.5rem;
      padding: 1.5rem;
      margin-top:0.75rem;
      .formLine{
        width: 100%;
        height: 2rem;
        margin-bottom: 1rem;
        .formLineL{
          font-weight: 400;
          font-size: 0.875rem;
          color: #333333;
          line-height: 2rem;
          text-align: left;
          float: left;
        }
        .formLineR{
          width: 14.375rem;
          height: 2rem;
          border-radius: 0.25rem;
          border: 1px solid #DCDFE6;
          float: right;
          .vininput{
            padding: 0;
            line-height: 1.5rem;
            margin-top:0.25rem;
            font-size: 0.75rem;
            padding-left: 0.5rem;
          }
        }
      }
    }
    .btn{
      width: 100%;
      height: 2.5rem;
      background: #FB1622;
      border-radius: 0.5rem;
      margin-top:1.5rem;
      font-weight: 500;
      font-size: 0.875rem;
      color: #FFFFFF;
      line-height:2.5rem;
      text-align: center;
    }
    .tips{
      font-weight: 400;
      font-size: 0.75rem;
      color: #333333;
      line-height: 1.375rem;
      text-align: center;
      margin-top:1.5rem;
    }
  }
 }
</style>
